<template>
   <li>
          <label>
            <input type="checkbox" :checked='todo.done' @change="handleCheck(todo.id)"/>
            <!-- 以下代码也能实现功能，但违反原则，修改了props的内容 -->
            <!-- <input type="checkbox" v-model="todo.done"/> -->
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input type="text"
              v-show="todo.isEdit"
              :value="todo.title"
              @blur="handleBlur(todo,$event)"
              ref="inputTitle"
            >
          </label>
          <button class="btn btn-danger"  @click="handleDelete(todo.id)">删除</button>
          <button class="btn btn-edit"  v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
        </li>
</template>

<script>
import pubsub from 'pubsub-js';
export default {
  name:'MyItem',
  props:['todo'],
  methods: {
    handleCheck(id){
        //this.checkTodo(id)
        this.$bus.$emit('checkTodo',id)
    },
    handleDelete(id){
       if(confirm('确定删除吗？')){
          //this.deleteTodo(id)
          //事件全局总线
          this.$bus.$emit('deleteTodo',id)
          //消息的订阅和发布
          //pubsub.publish('deleteTodo',id)
       }
    },
    handleEdit(todo){
        // eslint-disable-next-line no-prototype-builtins
        if(todo.hasOwnProperty('isEdit')){
          todo.isEdit = true
        } else { 
          this.$set(todo,'isEdit',true)
        }
        this.$nextTick(function(){
          this.$refs.inputTitle.focus()
          //  let focus: HTMLInputElement = this.$refs.focus as HTMLInputElement;
          //  search.focus();
        })
        // setTimeout(() => {
        // this.$refs.inputTitle.focus()
        // }, 200);
    },
    handleBlur(todo,e){
      todo.isEdit = false
      if(!e.target.value.trim()) return alert('输入不能为空！')
      this.$bus.$emit('updateTodo',todo.id,e.target.value)
    }
  },
}
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
li button {
  display: none;
  float: right;
  margin-top: 3px;
}
li:hover {
  background-color: #ccc;
}
li:hover button{
  display: block;
}
li:before {
  content: initial;
}
li:last-child {
  border-bottom: none;
}

</style>